import { common } from '@/assets/style/common'
import { View, StyleSheet, ScrollView } from 'react-native'

export default function SpecialTab() {
  return (
    <ScrollView stickyHeaderIndices={[2]} style={style.contain}>
      <View style={[common.flexCol, style.row3]}>
        <View style={[style.col, style.topCard]} />
        <View style={[style.col, style.topCard, { marginHorizontal: 12 }]} />
        <View style={[style.col, style.topCard]} />
      </View>
      <View style={style.banner} />
      <View style={style.conditionWrap}>
        <View style={style.condition} />
      </View>
      <View style={[style.introduceWrap, common.flexCol]}>
        <View style={style.siderCard} />
        <View style={style.rightCardBox}>
          <View style={style.rightCard} />
          <View style={style.rightCard} />
        </View>
        <View style={style.rightCardBox}>
          <View style={style.rightCard} />
          <View style={style.rightCard} />
        </View>
      </View>
      <View style={[style.introduceWrap, common.flexCol]}>
        <View style={style.siderCard} />
        <View style={style.rightCardBox}>
          <View style={style.rightCard} />
          <View style={style.rightCard} />
        </View>
        <View style={style.rightCardBox}>
          <View style={style.rightCard} />
          <View style={style.rightCard} />
        </View>
      </View>
      <View style={[style.introduceWrap, common.flexCol]}>
        <View style={style.siderCard} />
        <View style={style.rightCardBox}>
          <View style={style.rightCard} />
          <View style={style.rightCard} />
        </View>
        <View style={style.rightCardBox}>
          <View style={style.rightCard} />
          <View style={style.rightCard} />
        </View>
      </View>
      <View style={[style.introduceWrap, common.flexCol]}>
        <View style={style.siderCard} />
        <View style={style.rightCardBox}>
          <View style={style.rightCard} />
          <View style={style.rightCard} />
        </View>
        <View style={style.rightCardBox}>
          <View style={style.rightCard} />
          <View style={style.rightCard} />
        </View>
      </View>
    </ScrollView>
  )
}

const style = StyleSheet.create({
  contain: {
    backgroundColor: '#f1f1f1',
    height: '100%',
    width: '100%',
  },
  row3: {
    marginTop: 12,
    height: 160,
    marginHorizontal: 12,
  },

  rightWrap: {
    flexGrow: 2,
    height: 192,
    backgroundColor: '#fff000',
    borderRadius: 4,
    flexWrap: 'wrap',
    minWidth: 0,
  },
  col: {
    flex: 1,
    height: '100%',
  },
  topCard: {
    backgroundColor: '#fff',
    borderRadius: 4,
  },
  siderCard: {
    flex: 1,
    height: 180,
    marginBottom: 12,
    backgroundColor: '#fff',
    borderRadius: 4,
  },
  rightCardBox: {
    flex: 1,
    height: 192,
  },
  rightCard: {
    borderRadius: 4,
    height: 84,
    marginBottom: 12,
    width: '100%',
    backgroundColor: '#fff',
  },
  introduceWrap: {
    columnGap: 12,
    alignItems: 'flex-start',
    paddingHorizontal: 12,
  },
  conditionWrap: {
    padding: 12,
    backgroundColor: '#f1f1f1',
  },
  condition: {
    height: 36,
    borderRadius: 4,
    backgroundColor: '#fff',
  },
  banner: {
    margin: 12,
    marginBottom: 0,
    height: 88,
    borderRadius: 4,
    backgroundColor: '#fff',
  },
})
